﻿@using System.Text.RegularExpressions
@using Easy.Web.CMS.Widget
@{
    Style.Reqiured("Layout").AtHead();
    Script.Reqiured("jQueryUi").AtFoot();
    Easy.Web.CMS.Layout.LayoutEntity layOut = ViewData[Easy.Web.CMS.Layout.LayoutEntity.LayoutKey] as Easy.Web.CMS.Layout.LayoutEntity;
    Regex styleRegex = new Regex("^style=\"(.+?)\"$", RegexOptions.Compiled | RegexOptions.IgnoreCase);
}
@{
    bool zoneStart = false;
    foreach (var item in layOut.Html)
    {
        if (item.Html == Easy.Web.CMS.Zone.ZoneEntity.ZoneTag)
        {
            zoneStart = true;
            continue;
        }
        if (zoneStart)
        {
            <div class="zoneid" data-id="@item.Html"></div>
            <div class="zoneName">
                <a title="添加组件到该区域" class="add-widget label label-danger" href="@Url.Action("SelectWidget", "WidgetTemplate", new { module = "common", pageId=layOut.Page.ID,ZoneId=item.Html })">
                    <i class="glyphicon glyphicon-share-alt"></i>
                    @layOut.Zones.First(m => m.ID == item.Html).ZoneName
                </a>

            </div>
            if (layOut.ZoneWidgets.ContainsKey(item.Html))
            {
                foreach (WidgetPart widgetPart in layOut.ZoneWidgets[item.Html].OrderBy(m => m.Widget.Position).ThenBy(m => m.Widget.WidgetName))
                {
                    var attr = MvcHtmlString.Create(styleRegex.IsMatch(widgetPart.Widget.StyleClass ?? "") ? widgetPart.Widget.StyleClass + " class='widget-design'" : "class='" + widgetPart.Widget.StyleClass + " widget-design'");
                    <div @(attr) id="widget_@widgetPart.Widget.ID" data-widgetid="@widgetPart.Widget.ID">
                        <div class="zoneToolbar container-fluid blue">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="pull-left">
                                        <span class="sort-handle">
                                            <i class="glyphicon glyphicon-move ">
                                            </i>
                                            @widgetPart.Widget.WidgetName
                                        </span>

                                    </div>
                                    <div class="pull-right">
                                        @if (widgetPart.Widget.LayoutID.IsNullOrEmpty())
                                        {
                                            <a href="@Url.Action("Edit","Widget",new{module="Common",ID=widgetPart.Widget.ID})"><i class="glyphicon glyphicon-edit"></i></a>
                                            <a href="javascript:void(0)" class="delete" data-id="@widgetPart.Widget.ID"><i class="glyphicon glyphicon-trash"></i></a>
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                        @Html.Partial(widgetPart.Widget.PartialView, widgetPart.ViewModel)
                    </div>
                }
            }
            zoneStart = false;
            continue;
        }
        if (item.Html == Easy.Web.CMS.Zone.ZoneEntity.ZoneEndTag)
        {
            zoneStart = false;
            continue;
        }
        @Html.Raw(item.Html)
    }
}
@using (Script.AtFoot())
{
    <script type="text/javascript">
        $(function () {
            $(".zoneid").each(function () {
                $(this).parent().data("id", $(this).data("id"));
                $(this).remove();
            });
            $(".zone").sortable({
                handle: ".sort-handle",
                stop: function (event, ui) {
                    var tempForm = "";
                    ui.item.parent().children(".widget-design").each(function (i, ui) {
                        tempForm += "&widgets[" + i + "].ID=" + $(ui).data("widgetid") + "&widgets[" + i + "].Position=" + (i + 1);
                    });
                    if (tempForm) {
                        $.post("@Url.Action("SaveWidgetPosition", "Widget", new { module="Common"})", tempForm, function (data) {
                            InitMinHeight();
                        }, "html");
                    }
                }
            }).droppable({
                hoverClass: "dropWarning",
                accept: ".widget-design",
                greedy: true,
                tolerance: "pointer",
                drop: function (event, ui) {
                    if (ui.draggable.parent().data("id") == $(this).data("id")) {
                        return true;
                    }
                    var target = ui.draggable.clone();
                    target.removeAttr("style");
                    $(this).append(target);
                    ui.draggable.remove();
                    $.post("@Url.Action("SaveWidgetZone", "Widget", new { module="Common" })",
                        {
                            ID: target.data("widgetid"),
                            ZoneId: $(this).data("id"),
                            Position: $(this).children().size()
                        },
                        function (data) {
                            InitMinHeight();
                        }, "html");
                }
            });
            $(document).on("click", ".delete", function () {
                var id = $(this).data("id");
                if (confirm("确定要删除该组件吗？")) {
                    $.post("@Url.Action("DeleteWidget", "Widget",new { module="Common"})", { ID: id }, function (data) {
                        if (data) {
                            $("#widget_" + id).remove();
                            InitMinHeight();
                        }
                    }, "json");
                }
            });
            $(".helper").click(function () {
                $("#container").toggleClass($(this).data("class"));
            });
            InitMinHeight();
        });
        function InitMinHeight() {
            $(".zone").each(function () {
                if ($(this).children(":not(.zoneName)").size() == 0) {
                    $(this).addClass("empty-zone");
                } else {
                    $(this).removeClass("empty-zone");
                }
            });
        }
    </script>
}